<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拦截器</title>
</head>

<body>


  <script src="./js/axios.min.js"></script>
  <script>

    axios.defaults.baseURL = 'http://localhost:3000'

    axios.defaults.headers['mytoken'] = 'hello';
    // 1、请求拦截器 -- 在发送 ajax 之前，将请求拦截，做相应的配置
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做什么
      // 参数 config 中包含了请求头，请求数据，请求方式等信息

      console.log(config)
      config.headers.mytoken = 'asdfqwer'

      // return config 是一个固定写法，必不可少
      return config
    }, function (error) {
      // 对请求的错误做些什么
      return Promise.reject(error)
    })


    // 2、响应拦截器 -- 数据从后台返回，同一对数据处理

    axios.interceptors.response.use(function (response) {
      // 这个response 是指后台返回,被 axios 包裹好的数据
      // 但是这个数据比较频繁,有很多属性在开发中不需要
      // 所以需要将 data 真正使用的数据从 response 中取出来
      console.log(response)
      data = response.data
      return data
    }, function (error) {
      return Promise.reject(error)
    })


    axios.interceptors.request.use(config => {
      config.headers.mytoken = 'wwwwwwwwwww'
      return config
    }, error => {
      return Promise.reject(error)
    })

    axios.interceptors.response.use(response => {
      data = response.data
      return data
    }, error => {
      return Promise.reject(error)
    })

    axios.get('axios-json').then(function (res) {
      console.log(res)
    })

  </script>
</body>

</html>